<template>
  <div class="seat-management">
    <header>
      <button @click="logout">退出登录</button>
    </header>
    <main>
      <h2>选择放映厅</h2>
      <select v-model="selectedTheater">
        <option value="1">放映厅 1</option>
        <option value="2">放映厅 2</option>
        <option value="3">放映厅 3</option>
      </select>
      <h2 v-if="selectedTheater">座位表 - 放映厅 {{ selectedTheater }}</h2>
      <div class="seat-grid" v-if="selectedTheater" :class="{ active: isSeatGridActive }">
        <div v-for="row in seats[selectedTheater - 1]" :key="row" class="seat-row">
          <div
            v-for="seat in row"
            :key="seat"
            :class="seatClasses(seat)"
            @click="toggleSeat(selectedTheater - 1, row, seat)"
          >
            {{ seat.id }}
            <span v-if="seat.locked" class="locked-icon">🔒</span>
          </div>
        </div>
      </div>
      <div class="seat-stats" v-if="selectedTheater">
        <p>可选座位: {{ availableSeats }}</p>
        <p>已选座位: {{ selectedSeats }}</p>
        <p>锁定座位: {{ lockedSeats }}</p>
      </div>
      <div class="seat-actions" v-if="selectedTheater">
        <button @click="lockAllSelected">锁定已选座位</button>
        <button @click="unlockAllSelected">解锁已选座位</button>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed, watchEffect } from 'vue';

const theater1 = { rows: 5, cols: 10, id: 1 };
const theater2 = { rows: 5, cols: 10, id: 2 };
const theater3 = { rows: 5, cols: 10, id: 3 };

function generateSeats(theater) {
  const seatsData = [];
  for (let rowIndex = 0; rowIndex < theater.rows; rowIndex++) {
    const row = [];
    for (let colIndex = 0; colIndex < theater.cols; colIndex++) {
      row.push({
        id: `${String.fromCharCode(65 + rowIndex)}${colIndex + 1}`,
        selected:
          theater.id === 1 && rowIndex === 1 && colIndex < 3 ||
          theater.id === 2 && rowIndex === 2 && colIndex > 5 && colIndex < 8 ||
          theater.id === 3 && rowIndex === 3 && colIndex === 4? true : false,
        locked: false,
      });
    }
    seatsData.push(row);
  }
  return seatsData;
}

export default {
  name: 'SeatManagement',
  setup() {
    const adminName = ref('管理员A');
    const currentYear = ref(new Date().getFullYear());
    const selectedTheater = ref(1);
    const seats = ref([
      generateSeats(theater1),
      generateSeats(theater2),
      generateSeats(theater3),
    ]);

    function seatClasses(seat) {
      return [
        'seat',
        { 'seat-selected': seat.selected, 'seat-locked': seat.locked },
      ];
    }

    function toggleSeat(theaterIndex, row, seat) {
      if (seat.locked) {
        alert('该座位已锁定，无法选择。');
        return;
      }
      seat.selected =!seat.selected;
    }

    function lockAllSelected() {
      seats.value = seats.value.map((theaterSeats, theaterIndex) =>
        theaterSeats.map(row =>
          row.map(seat => ({...seat, locked: seat.selected }))
        )
      );
      seats.value = seats.value.map((theaterSeats, theaterIndex) =>
        theaterSeats.map(row =>
          row.map(seat => ({...seat, selected: false }))
        )
      );
    }
    function unlockAllSelected() {
      seats.value = seats.value.map((theaterSeats, theaterIndex) =>
        theaterSeats.map(row =>
          row.map(seat => ({...seat, locked: false }))
        )
      );
    }
    const availableSeats = computed(() => {
      const selectedTheaterSeats = seats.value[selectedTheater.value - 1];
      return selectedTheaterSeats.flat().filter(seat =>!seat.selected &&!seat.locked).length;
    });
    const selectedSeats = computed(() => {
      const selectedTheaterSeats = seats.value[selectedTheater.value - 1];
      return selectedTheaterSeats.flat().filter(seat => seat.selected).length;
    });
    const lockedSeats = computed(() => {
      const selectedTheaterSeats = seats.value[selectedTheater.value - 1];
      return selectedTheaterSeats.flat().filter(seat => seat.locked).length;
    });
    const isSeatGridActive = ref(false);
    watchEffect(() => {
      isSeatGridActive.value = false;
      setTimeout(() => {
        isSeatGridActive.value = true;
      }, 100);
    });

    function logout() {
      alert('您已退出登录');
    }
    return {
      adminName,
      currentYear,
      selectedTheater,
      seats,
      toggleSeat,
      lockAllSelected,
      unlockAllSelected,
      availableSeats,
      selectedSeats,
      lockedSeats,
      logout,
      seatClasses,
      isSeatGridActive,
    };
  },
};
</script>
<style scoped>
.seat-management {
  font-family: 'Helvetica Neue', sans-serif;
  max-width: 1000px;
  margin: 30px auto;
  padding: 30px;
  border: 2px solid #ddd;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  background-color: #fcfcfc;
}
header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 40px;
  padding: 15px 0;
  border-bottom: 2px solid #eee;
}

header button {
  padding: 12px 25px;
  font-size: 18px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s;
}

header button:hover {
  background-color: #0056b3;
}

main {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

select {
  padding: 12px;
  font-size: 18px;
  border: 2px solid #ddd;
  border-radius: 8px;
}

.seat-grid {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seat-grid.active {
  opacity: 1;
}

.seat-row {
  display: flex;
  justify-content: center;
}

.seat {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #ddd;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s, border-color 0.3s;
  font-size: 18px;
}

.seat-selected {
  background-color: #ffeb3b;
  color: #000;
  border-color: #ffeb3b;
}

.seat-locked {
  background-color: #e0e0e0;
  cursor: not-allowed;
  border-color: #ccc;
}

.locked-icon {
  margin-left: 8px;
  color: red;
  font-size: 22px;
}

.seat-stats,
.seat-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 25px;
  border: 2px solid #eee;
  border-radius: 12px;
  background-color: #fff;
}

.seat-stats p,
.seat-actions button {
  margin: 0;
  padding: 15px;
  font-size: 18px;
}

.seat-actions button {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  cursor: pointer;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.seat-actions button:hover {
  background-color: #218838;
}

footer {
  text-align: center;
  margin-top: 40px;
  font-size: 16px;
  color: #777;
  border-top: 2px solid #eee;
  padding-top: 30px;
}
</style>